<template>
  <div style="margin-top: 60px;margin-left: 80px;border: 0px solid red">
    <el-form style="margin-left: -40px" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
             class="demo-form-inline">
      <el-form-item label="字段" prop="key">
        <el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择">
          <el-option label="宿舍号" value="dor_id"></el-option>
          <el-option label="楼宇名称" value="b_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="值">
        <el-input v-model="ruleForm.value" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;position: relative;top: 10px">
      <el-table-column
          fixed
          label="ID"
          width="160"
          prop="aid">
      </el-table-column>
      <el-table-column
          label="楼宇"
          width="160"
          prop="bmsg">
      </el-table-column>
      <el-table-column
          label="宿舍名"
          width="160"
          prop="dorName">
      </el-table-column>
      <el-table-column
          label="学生姓名"
          width="160"
          prop="stuName">
      </el-table-column>
      <el-table-column
          label="宿舍管理员"
          width="160"
          prop="dname">
      </el-table-column>
      <el-table-column
          label="时间"
          width="200"
          prop="adate">
      </el-table-column>
      <el-table-column
          label="原因"
          width="214"
          prop="aseason">
      </el-table-column>

    </el-table>
    <el-pagination
        style="margin-top: 30px;float: right"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="parseInt(total)"
        :current-page.sync="currentPage"
        @current-change="page"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AbsentRecord",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: '',
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 5
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      },
      tableData: null,
      search: ''
    }
  },
  methods:{
    page(currentPage){
      const _this=this
      if (_this.ruleForm.value==''){
        axios.get('http://192.168.163.234:8081/absent/list/'+currentPage+'/'+_this.pageSize).then(
            function (response){
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }else{
        _this.ruleForm.page=_this.currentPage
        axios.get('http://192.168.163.234:8081/absent/search',{params:_this.ruleForm}).then(
            function (response) {
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }
    },
    onSubmit(formName) {

      //让翻页复原
      this.currentPage=1;
      this.$refs.ruleForm.validate((valid)=>{
        if (valid){
          const _this=this
          _this.ruleForm.page=_this.currentPage
          axios.get('http://192.168.163.234:8081/absent/search',{params:_this.ruleForm}).then(
              function (response) {
                _this.tableData=response.data.data.data
                _this.total=response.data.data.total
              }
          )
        }
      })
    }
  },
  created() {
    const _this=this
    axios.get('http://192.168.163.234:8081/absent/list/1/'+_this.pageSize).then(
        function (response) {
          console.log(response.data.data.data)
          _this.tableData=response.data.data.data
          _this.total=response.data.data.total
        }
    )
  }
}
</script>

<style scoped>

</style>
